<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>NiiVue</title>
    <link rel="stylesheet" href="niivue.css" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
  </head>
  <body>
    <noscript>
      <strong>niivue requires JavaScript.</strong>
    </noscript>
    <header>
      <label for="checkXRay">XRay</label>
      <input type="checkbox" id="checkXRay" unchecked />
      <label for="dragMode">Drag mode</label>
      <select id="dragMode">
        <option value="contrast" selected>contrast</option>
        <option value="measurement">measurement</option>
        <option value="pan">pan/zoom</option>
        <option value="slicer3D">slicer3D</option>
        <option value="none">none</option>
      </select>
      <label for="renderMode">Volume Render Mode</label>
      <select id="renderMode">
        <option value="-1">slices</option>
        <option value="0">matte</option>
        <option value="0.3">low</option>
        <option value="0.6">medium</option>
        <option value="1.0" selected>high</option>
      </select>
      <label for="matCaps">Choose a MatCap:</label>
      <select id="matCaps">
        <option value="Shiny">Shiny</option>
        <option value="Cortex" selected>Cortex</option>
        <option value="Cream">Cream</option>
        <option value="Fuzzy">Fuzzy</option>
        <option value="Peach">Peach</option>
        <option value="Plastic">Plastic</option>
      </select>
      <label for="zoomSlider">Zoom</label>
      <input
        type="range"
        min="10"
        max="300"
        value="100"
        class="slider"
        id="zoomSlider"
      />
    </header>
    <main>
      <canvas id="gl1"></canvas>
    </main>
    <footer id="location">&nbsp;</footer>
    <script type="module" async>
      import * as niivue from "../dist/index.js"
      checkXRay.onchange = function () {
        nv1.opts.meshXRay = this.checked * 0.05
        nv1.drawScene()
      }
      dragMode.onchange = function () {
        switch (document.getElementById("dragMode").value) {
          case "none":
            nv1.opts.dragMode = nv1.dragModes.none
            break
          case "contrast":
            nv1.opts.dragMode = nv1.dragModes.contrast
            break
          case "measurement":
            nv1.opts.dragMode = nv1.dragModes.measurement
            break
          case "pan":
            nv1.opts.dragMode = nv1.dragModes.pan
            break
          case "slicer3D":
            nv1.opts.dragMode = nv1.dragModes.slicer3D
            break
        }
      }
      zoomSlider.oninput = function () {
        nv1.setScale(this.value / 100)
      }
      renderMode.onchange = function () {
        nv1.setVolumeRenderIllumination(parseFloat(this.value))
      }
      matCaps.onchange = function () {
        let matCapName = document.getElementById("matCaps").value
        nv1.loadMatCapTexture("../matcaps/" + matCapName + ".jpg")
      }
      var volumeList1 = [
        { url: "../images/mni152.nii.gz", cal_min: 30, cal_max: 80 },
        {url: "../images/spmMotor.nii.gz",cal_min: 3,cal_max: 8,colormap: "warm"}
      ]
      function handleLocationChange(data) {
        document.getElementById("location").innerHTML =
          "&nbsp;&nbsp;" + data.string
      }
      let defaults = {
        loadingText: "there are no images",
        backColor: [1, 1, 1, 1],
        show3Dcrosshair: true,
        limitFrames4D: 3,
        onLocationChange: handleLocationChange,
      }
      var nv1 = new niivue.Niivue(defaults)
      await nv1.attachTo("gl1")
      nv1.setSliceType(nv1.sliceTypeRender)
      nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS
      nv1.setVolumeRenderIllumination(1.0)
      nv1.setClipPlane([0.3, 180, 20])
      await nv1.loadVolumes(volumeList1)
      await nv1.loadMeshes([
        { url: "../images/connectome.jcon" },
        { url: "../images/dpsv.trx", rgba255: [0, 142, 0, 255] },
      ])
      matCaps.dispatchEvent(new Event("change"))
      nv1.setSliceType(nv1.sliceTypeMultiplanar)
      nv1.graph.autoSizeMultiplanar = true
    </script>
  </body>
</html>